<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->

<div class="am-cf shop-main">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-12">
          <ol class="am-breadcrumb am-margin-bottom-0" id="olCategoryPath">
            <li><a href="index.html"><span class="am-icon-home"> </span>首页</a></li>
          </ol>
          <div class="am-g">
            <div class="am-u-sm-12 am-u-md-1">&nbsp;</div>
            <div class="am-u-sm-12 am-u-md-3">
              <div class="am-slider am-slider-default" data-am-flexslider>
                <ul class="am-slides" id="ulProductImage">
                </ul>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-7">
              <strong class="am-text-xl" id="name">-</strong>
              <div class="am-panel am-panel-default am-text-xs am-margin-top-xs">
                <div class="am-panel-bd am-padding-0">
                  <ul class="am-avg-sm-2 am-text-sm">
                    <li>分类：<i id="category">-</i></li>
                    <li>卖家：<a id="aSellerId" href="javascript:void(0);"><strong class="am-text-primary" id="sellerName">-</strong></a>
                    </li>

                    <li>&nbsp;</li><li>&nbsp;</li>
                    <li>浏览量：<strong class="am-text-success" id="viewNum">-</strong></li>
                    <li>粉丝数：<strong class="am-text-warning" id="followNum">-</strong></li>
                    <li>&nbsp;</li><li>&nbsp;</li>
                    <li>售价：<strong class="am-text-danger" id="price">-</strong></li>
                  </ul>
                </div>
              </div>
              <div class="am-panel am-panel-default">
                <div class="am-panel-bd am-g">
                  <div class="am-u-md-12 am-u-lg-6">
                    <div class="am-input-group am-input-group-sm">
                      <span class="am-input-group-btn">
                        <button class="am-btn am-btn-default" type="button" disabled="disabled">我要购买</button>
                      </span>
                      <input type="number" class="am-form-field" id="stock" value="1" min="1" />
                      <span class="am-input-group-btn">
                        <button class="am-btn am-btn-default" type="button" disabled="disabled">只</button>
                      </span>
                    </div>
                  </div>
                  <div class="am-u-md-12 am-u-lg-2">
                  <span class="am-text-xs" id="lblStock">-</span>
                  </div>
                  <div class="am-u-md-12 am-hide-lg-only am-margin-xs"></div>
                  <div class="am-u-md-12 am-margin-xs">
                  </div>
                  <div class="am-u-md-12 am-u-lg-12">
                    <button type="button" class="am-btn am-btn-danger am-btn-sm outStock" style="display: none;" disabled="disabled">已售馨</button>
                    <button type="button" class="am-btn am-btn-default am-btn-sm offSale" style="display: none;"  disabled="disabled">已下架</button>
                    <button type="submit" class="am-btn am-btn-success am-btn-sm addCartItem" pid="" style="display: none;" >加入购物车</button>
                    <button type="button" class="am-btn am-btn-warning am-btn-sm addFavorite" pid="" style="display: none;" >收藏</button>
                  </div>
                </div>
              </div>

            </div>
            <div class="am-u-sm-12 am-u-md-1">&nbsp;</div>
          </div>
          <hr />
          <div class="am-tabs am-text-xs" data-am-tabs id="tab">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
              <li class="am-active"><a href="#tab1">商品介绍</a></li>
            </ul>

            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active detail" id="tab1">
                加载中。。。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    // 商品分类列表
    let categoryList = new Array();

    // 商品id
    let productId = GetQueryString('id');

    // 商品分类id
    let categoryId = GetQueryString('cid');

    let jsonUser;
    let token;

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 加载'商品分类'列表数据
        loadCategoryList();

        // 查看是否存在商品id
        if( productId ) {
            // 如果存在商品id
            // 加载商品信息
            loadProductInfo();
        }

        // 判断当前用户是否已经登录
        if( token ) {
            // 如果已经登录，就加载收藏信息
            loadFollowInfo();
        }

        // 添加商品浏览数量
        $.addProductViewNum(productId, categoryId);

    });// $(function());

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

            // 填充顶部分类路径
            fillNavCategoryPath();

        }// success()

    });// $.post();

}// loadCategoryList();

/** 填充顶部分类路径 **/
function fillNavCategoryPath( ) {

    // 父分类id
    let parentCategoryId;
    // 父分类名称
    let parentCategoryName;

    // 子分类id
    let childCategoryId;
    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类id
            parentCategoryId = category.parentId;
            // 设置子分类id
            childCategoryId = categoryId;
            // 设置子分类名称
            childCategoryName = category.name;
            break;
        }

    }// for();

    // 循环查找父分类名称
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，等于找到的父分类id
        if( category.id == parentCategoryId ){
            // 设置父分类名称
            parentCategoryName = category.name;
            break;
        }

    }// for();

    // 父分类
    let parentLi = '<li><a href="product_picture_list.html?cid=' + parentCategoryId
                    + '&pcid=0">' + parentCategoryName + '</a></li>';
    $('#olCategoryPath').append(parentLi);

    // 子分类
    let childLi = '<li><a href="product_picture_list.html?cid=' + childCategoryId
                    + '&pcid=' + parentCategoryId + '">' + childCategoryName + '</a></li>';
    $('#olCategoryPath').append(childLi);

}// fillNavCategoryPath();

/** 根据商品id，查找商品信息 **/
function loadProductInfo(){

    // 加载'商品信息'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/product/get',
        async: false,
        data: {id:productId},
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 填充商品信息数据
            fillProductInfo(result.data);
        }

    });// $.ajax();

}// loadProductInfo();

/** 根据商品id，查找商品收藏信息 **/
function loadFollowInfo(){

    // 加载'商品信息'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/follow/checkExist',
        async: false,
        data: {
            token: token,
            productId: productId
        },
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200

            // 判断返回数据是否为TRUE
            if( result.data == true ) {
                // 表示已经收藏过该商品了
                $('.addFavorite').html('已收藏');
                $('.addFavorite').attr('disabled', 'disabled');
            }
        }

    });// $.ajax();

}// loadProductInfo();

/** 填充商品信息 **/
function fillProductInfo( product ) {

    // 商品名称
    $('#name').html(product.name);
    // 卖家id
    $('#aSellerId').attr('href', 'seller_item_list.html?id=' + product.userId);
    // 卖家用户名
    $('#sellerName').html(product.userName);
    // 浏览量
    $('#viewNum').html(product.viewNum);
    // 收藏量
    $('#followNum').html(product.followNum);
    // 库存量
    $('#stock').val(1);
    $('#stock').attr('max', product.stock);
    // 剩余库存
    $('#lblStock').html('剩余' + product.stock + '只');
    // 分类
    $('#category').html(getCategoryPath(product.categoryId));
    // 售价
    $('#price').html(priceCurrencyFormat(product.price));

    // 填充商品图片
    fillProductImageList( product.subImage );

    // 设置商品按钮列表状态
    if( product.status == PRODUCT_STATUS_CONST.OFF_SALE ) {
        // 如果商品状态是否为'已下架'
        $('.offSale').show();

    } else if( product.stock == 0 ) {
        // 如果库存数量为0
        $('.outStock').show();

    } else {
        // 如果商品上架并且库存数量大于0
        // 设置商品id，并显示
        $('.addCartItem').attr('pid', productId);
        $('.addCartItem').show();
    }// else( product.status == PRODUCT_STATUS_CONST.OFF_SALE );

    // 设置收藏按钮状态
    $('.addFavorite').attr('pid', productId);
    $('.addFavorite').show();

    // 商品描述
    $('.detail').html(product.detail);


}// fillProductInfo( product );

/** 填充商品图片 **/
function fillProductImageList( subImage ) {

    // 清空原图片列表元素
    $('#ulProductImage').empty();

    // 商品图片列表
    let subImageList = subImage.split(',');

    // 填充商品图片
    for( let i = 0; i < subImageList.length; i++ ) {

        let productImgUrl = subImageList[i];

        // 要添加的图片组HTML
        let liImage = '<li><img src="' + IMAGE_URL_CONST.PRODUCT + productImgUrl +  '" class="am-img-bdrs">'+ '</li>';

        // 添加商品图片组
        $('#ulProductImage').append(liImage);

    }// for( let i = 0; i < subImageList.length; i++ );

}// fillProductImageList( subImageList );

/** 根据商品分类id，获取商品分类路径信息 **/
function getCategoryPath( categoryId ) {

    // 分类路径
    let categoryPath = "";

    // 父分类id
    let parentCategoryId;

    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类id
            parentCategoryId = category.parentId;
            // 设置子分类名称
            childCategoryName = category.name;
            break;
        }

    }// for();

    // 循环查找父分类名称
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，等于找到的父分类id
        if( category.id == parentCategoryId ){
            // 设置当前父分类名称路径
            categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
            break;
        }

    }// for();

    return categoryPath;


}// getCategoryPath( categoryId );
</script>
</html>

			